<template>
  <div class="comparison-box">
    <div class="swap-box item-box hw-flex-style-c-c" @click="open">
      <div class="num-box hw-flex-style-c-c" v-if="list.length > 0">
        <span v-html="getnumType"></span>
      </div>

      <!-- <t-icon size="28" name="swap" class="swap-box-icon" style="color: #fff"></t-icon> -->
      <i class="doorIcon">&#xe64d;</i>
    </div>
    <!-- <div class="backtop-box item-box hw-flex-style-c-c" @click="backTop">
      <t-icon size="28" name="backtop" style="color: #fff"></t-icon>
    </div> -->
  </div>
  <div class="dialog-box">
    <t-dialog v-model:visible="visible1" body="自定义底部按钮，直接传入文字" :on-confirm="onConfirm" :on-close="close">
      <template #header>
        <div>
          <span class="heard-title1">展品对比</span>
          <span class="heard-title2">最多可对比6款展品</span>
        </div>
      </template>
      <template #default>
        <div class="content-box">
          <div class="content-box-default">
            <ul class="item">
              <li class="heard-ul li-styme-col">
                <span class="heard-ul-title1" style="margin-bottom: 18px"
                  >共
                  <span class="heard-ul-title2" v-html="getNum()"></span>
                  款
                </span>
                <div style="width: 100%">
                  <t-switch v-model="checked" />
                </div>
                <span style="margin-top: 8px" class="heard-ul-title1">仅看差异</span>
              </li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品类型</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品等级</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品来源</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品年代</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品质地</li>
              <li class="ul-content heard-ul-title1 li-styme-col">收藏单位</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品尺寸</li>
              <li class="ul-content heard-ul-title1 li-styme-col">展品描述</li>
            </ul>
            <div class="draggable-box">
              <draggable @end="datadragEnd" v-model="list" item-key="id" handle=".mover">
                <template #item="{ element }">
                  <ul class="item-li">
                    <li class="heard-li li-styme-col" v-if="element.name">
                      <t-icon
                        class="hw-click-cursor mover"
                        name="move"
                        size="16"
                        style="color: rgba(153, 153, 153, 0.9); transform: rotate(90deg)"
                      ></t-icon>
                      <img
                        :src="$filters.getLinkUrl(element?.coverUrl + '?imageView2/2/w/48/h/48/format/webp')"
                        alt=""
                        class="heard-li-img"
                      />
                      <span class="name-text">{{ element.name }}</span>
                      <span @click="deletId(element.id)" class="del-text">删除</span>
                    </li>

                    <li class="heard-li li-styme-col" v-else>
                      <img
                        src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/exhibitNull.png"
                        alt=""
                        class="heard-li-img-null"
                      />
                      <span class="heard-li-text-null">您还可以继续添加</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.typeValue, 1) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.levelValue, 2) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.sourceValue, 3) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.ageValue, 4) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.texture, 5) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.companyName, 6) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1">{{ getLiText(element.size, 7) }}</span>
                    </li>
                    <li class="li-content li-styme-col">
                      <span class="heard-ul-title1" v-html="getText(element.description)"></span>
                    </li>
                  </ul>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="footer-box">
          <span @click="remove">一键清空</span>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import draggable from 'vuedraggable';
import { ref, watch, computed } from 'vue';
import { getExhibitStore } from '@/store';
import { storeToRefs } from 'pinia';

const store = getExhibitStore();
const numbers = ref(0);
const { ExhibitList } = storeToRefs(store);
const list = ref([{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]);
const checked = ref(false);
const visible1 = ref(false);
const drag = ref(false);
const open = () => {
  visible1.value = !visible1.value;
};
const backTop = () => {
  visible1.value = false;
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};
const getNum = () => {
  let arr = 0;
  list.value.forEach((element) => {
    if (element.id > 6) {
      arr = arr + 1;
    }
  });
  return arr;
};
const init = () => {
  list.value = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
  store.ExhibitList.forEach((el: any, index: number) => {
    list.value[index] = el;
  });
  // list.value = store.ExhibitList;
};
init();
// console.log(store.ExhibitList);
const close = () => {
  visible1.value = false;
};
const onConfirm = () => {
  visible1.value = false;
};
const datadragEnd = (evt) => {
  // evt.preventDefault();
  // console.log('拖动前的索引 :' + evt.oldIndex);
  // console.log('拖动后的索引 :' + evt.newIndex);
  let arr: any = [];
  list.value.forEach((el) => {
    if (el.name) {
      arr.push(el);
    }
  });
  store.sortList(arr);
};
const remove = () => {
  list.value = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }];
  store.removeList();
};
const deletId = (id: number) => {
  let numberList = list.value.findIndex((el) => {
    return el.id == id;
  });
  list.value.splice(numberList, 1);
  let numberArr = store.ExhibitList.findIndex((el) => {
    return el.id == id;
  });
  store.deleteInfo(numberArr);
};
const getText = (e?: string) => {
  if (!e) {
    return '-';
  }

  var s = '';
  s = e.replace(/<\/?(img|a|p|span)[^>]*>/gi, '');
  return s;
};
let getLiText = (e: string, type: number) => {
  let Arr = list.value.filter((el) => {
    return el.id > 6;
  });
  // console.log(Arr)
  let nums: number;
  if (!e) {
    return '-';
  }
  if (!checked.value) {
    return e;
  }

  switch (type) {
    case 1:
      nums = Arr.findIndex((el) => {
        return el.typeValue !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    case 2:
      nums = Arr.findIndex((el) => {
        return el.levelValue !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    case 3:
      nums = Arr.findIndex((el) => {
        return el.sourceValue !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    case 4:
      nums = Arr.findIndex((el) => {
        return el.ageValue !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;

    case 5:
      nums = Arr.findIndex((el) => {
        return el.texture !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    case 6:
      nums = Arr.findIndex((el) => {
        return el.companyName !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    case 7:
      nums = Arr.findIndex((el) => {
        return el.size !== e;
      });
      if (nums === -1) {
        return '-';
      } else {
        return e;
      }
      break;
    default:
      break;
  }
};
const getnumType = computed(() => {
  let arr = 0;
  store.ExhibitList.forEach((el) => {
    if (el.name) {
      arr = arr + 1;
    }
  });
  return arr;
});
watch(
  () => ExhibitList,
  () => {
    console.log('变化l');
    init();
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.comparison-box {
  display: flex;
  position: fixed;
  bottom: 88px;
  right: 20px;
  height: 50px;
  z-index: 1000;
}

.item-box {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  border-radius: 50%;
}

.swap-box-icon {
  transform: rotate(90deg);
}

.swap-box {
  position: relative;
  // margin-right: 20px;
}

.num-box {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #d54941;
  border-radius: 999px 999px 999px 999px;
  opacity: 1;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 20px;
}

.dialog-box {
  :deep(.t-dialog) {
    width: 1180px;
  }

  :deep(.t-dialog--default) {
    padding: 0;
  }

  :deep(.t-dialog__body) {
    padding: 0;
    // padding: 10px;
  }

  :deep(.t-dialog__header-content) {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 18px 32px;
  }

  :deep(.t-dialog__close) {
    margin-right: 32px;

    .t-icon {
      font-size: 24px;
    }
  }

  :deep(.t-dialog__footer) {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 18px 32px;
  }

  :deep(.t-dialog__ctx.t-dialog__ctx--fixed) {
    z-index: 9999;
  }
}

.footer-box {
  display: flex;
  width: 100%;

  span {
    cursor: pointer;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;

    line-height: 22px;
    text-decoration: underline;
  }
}

:deep(.t-dialog__header) {
  height: 64px;
}

.heard-title1 {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);

  line-height: 27px;
}

.t-dialog__close {
  font-size: 24px;
}

:deep(.t-dialog__close .t-icon) {
  font-size: 24px;
  line-height: 24px;
  transform: scale(1.6);
}

.heard-title2 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  color: rgba(153, 153, 153, 0.9);
  margin-left: 11px;
}

.content-box {
  display: flex;
  width: 1176px;
  height: 448px;

  // overflow: hidden;
}

.content-box-default {
  display: flex;
  flex: 1;
  margin-right: 4px;
  height: 448px;

  overflow-x: scroll;
  overflow-y: scroll;
  // padding-right: 3px;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.item {
  width: 128px;
}

.heard-ul {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
  width: 128px;
  height: 154px;
  border-right: 1px solid #e7e7e7;

  border-bottom: 1px solid #e7e7e7;
}

.item-li {
  width: 216px;

  border-right: 1px solid #e7e7e7;

  // border-bottom: 1px solid #e7e7e7;
}

.heard-li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 216px;
  height: 154px;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.li-styme-col {
  padding: 10px 30px;
}

.li-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 216px;
  height: 56px;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  overflow: hidden;

  span {
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 24px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
  }
}

.heard-ul-title1 {
  font-size: 16px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
  line-height: 24px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 2; //行数
  line-clamp: 2;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}

.heard-ul-title2 {
  color: rgba(230, 43, 23, 1);
}

.ul-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 128px;
  height: 56px;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.content-box-default::-webkit-scrollbar {
  // width: 11px;
  // height: 11px;
  background: #000;
  scrollbar-arrow-color: #fff;
}

.content-box-default::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 5px 5px 5px 5px;
}

.heard-li-img {
  width: 48px;
  height: 48px;
  border-radius: 3px 3px 3px 3px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.draggable-box {
  display: flex;
}

.draggable-box > div {
  display: flex;
}

.heard-li-img-null {
  width: 60px;
  height: 60px;
}

.heard-li-text-null {
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 0.6);
  line-height: 22px;
  margin-top: 12px;
}

.del-text {
  cursor: pointer;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 22px;
}

.item-li {
  .heard-li :hover {
    .del-text {
      display: none;
    }
  }
}

.name-text {
  text-align: center;
  width: 100%;
  font-family: PingFang SC-Regular, PingFang SC;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 24px;
  font-size: 16px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 24px;
  margin-bottom: 4px;
}

:deep(.t-dialog__ctx) {
  z-index: 99999 !important;
}

:deep(.t-dialog) {
  z-index: 99999 !important;
}

:deep(.t-dialog__header) {
  padding: 0 0;
}

.content-box-default::-webkit-scrollbar {
  background: #000;
  width: 8px;
  height: 8px;
  scrollbar-arrow-color: #fff;
}

.content-box-default::-webkit-scrollbar-vertical {
  background: #000;
  height: 8px;
  scrollbar-arrow-color: #fff;
}

.content-box-default::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.doorIcon {
  font-size: 28px;
  color: #fff;
}
</style>
